<template>
  <div class="publish_item">
    <div @click="itemPublishClick">
      <h3 class="title">{{itemPublish.title}}</h3>
      <p class="content">{{itemPublish.processDesc}}</p>
      <div class="process">
        <span>面试过程:</span>
        <div class="process_item">
          <div v-for="index in itemPublish.interviewTypes.length">
            <span>第{{counter(index)}}轮面试:</span>
            <span>{{itemPublish.interviewTypes[index - 1]}}</span>
          </div>
        </div>
      </div>
      <div class="interview">
        <span>面试结果:</span> <i>{{itemPublish.feedback.result}}</i>
        <span>面试难度:</span> <i>{{itemPublish.feedback.difficulty}}</i>
        <span>面试感受:</span> <i>{{itemPublish.feedback.feeling}}</i>
      </div>
      <div class="detail">
        <div class="post">
          <span>职位:</span>
          <span>{{itemPublish.position}}</span>
        </div>
        <div class="firm">
          <span>公司:</span>
          <span>{{itemPublish.firm}}</span>
        </div>
        <div class="date">
          <span>时间:</span>
          <span>{{time}}</span>
        </div>

      </div>
    </div>
    <span class="el-icon-delete del_publish_item" @click="delPublishItem"></span>
  </div>
</template>

<script>
  import {numericTypeConverse, formatTime} from "common/Utils";
  import {delInterview} from "network/profile";

  export default {
    name: "PublishItem",
    props: {
      itemPublish: {
        type: Object,
        default() {
          return {}
        }
      }
    },
    computed: {
      time() {
        return this.itemPublish.publishTime ? formatTime(this.itemPublish.publishTime) : ''
      }
    },
    methods: {
      counter(index) {
        return numericTypeConverse(index)
      },
      itemPublishClick() {
        this.$router.push({path: '/detail/' + this.itemPublish.id}, onComputed => {}, onAbort => {})
      },
      delPublishItem() {
        this.$confirm('删除此发布内容, 是否确定?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          delInterview(this.itemPublish.id).then(res => {
            console.log(res)
            if(res.data.code) {
              this.$toast.show('删除成功', 'success', 1000)
              this.$emit('refresh')
            }
          })
        }).catch(() => {});
      },
    }
  }
</script>

<style scoped>
  .publish_item {
    position: relative;
    width: 720px;
    margin: 20px;
    padding: 15px;
    border: 1px solid #eeeeee;
    border-radius: 15px;
    box-sizing: border-box;
  }

  .publish_item:hover {
    cursor: pointer;
    box-shadow: 0 0 8px rgba(0,0,0,.1);
  }

  h3 {
    font-size: 16px;
  }

  .content {
    margin-top: 12px;
    font-size: 14px;
  }

  .process {
    overflow: hidden;
    margin-top: 12px;
    font-size: 12px;
  }

  .process > span {
    float: left;
  }

  .process .process_item {
    float: left;
  }

  .process .process_item div {
    margin: 0 0 5px 5px;
  }

  .process .process_item div span:nth-child(1) {
    margin-right: 5px;
  }

  .interview {
    margin-top: 8px;
    font-size: 12px;
  }

  .interview span {
    margin-right: 5px;
    color: #8F9395;
  }

  .interview i {
    position: relative;
    margin-right: 20px;
    font-style: normal;
  }

  .interview i:nth-of-type(1)::after,
  .interview i:nth-of-type(2)::after {
    position: absolute;
    top: 1px;
    right: -12px;
    content: "|";
    color: #8F9395;
  }

  .detail {
    position: absolute;
    top: 53%;
    transform: translate(0, -50%);
    right: 50px;
    color: #8F9395;
  }

  .detail > div {
    margin-bottom: 10px;
  }

  .detail > div span:nth-child(1) {
    margin-right: 5px;
  }

  .del_publish_item {
    position: absolute;
    top: 50%;
    right: -30px;
    transform: translate(0, -50%);
    font-size: 16px;
    color: #8F9395;
  }

  .del_publish_item:hover {
    color: #002766;
    cursor: pointer;
  }
</style>
